<template>
  <div class="mall-container">
    <ul>
      <router-link
        to="/index/mall/home"
        custom
        v-slot="{isExactActive, navigate}"
      >
        <li @click="navigate" :class="{active: isExactActive}">
          首页
        </li>
      </router-link>
      <router-link
        to="/index/mall/products/001"
        custom
        v-slot="{navigate}"
      >
        <li @click="navigate" :class="{active: isProductsActive}">
          产品列表
        </li>
      </router-link>
      <router-link
        to="/index/mall/about"
        custom
        v-slot="{isExactActive, navigate}"
      >
        <li @click="navigate" :class="{active: isExactActive}">
          关于我们
        </li>
      </router-link>
    </ul>
    <router-view></router-view>
    <router-view name="intro"></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    isProductsActive() {
      const fullPath = this.$route.fullPath
      return /products/.test(fullPath)
    }
  }
}
</script>

<style scoped>
  .mall-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  ul {
    height: 50px;
    display: flex;
    border-bottom: solid 1px #ccc;
  }

  ul>li {
    flex: 1;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  ul>li.active {
    background-color: purple;
    color: #fff;
  }
</style>